<template>
  <el-table
    :data="tableData"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
  >
    <el-table-column
      v-for="(item, index) in tableConfig"
      :prop="item.prop"
      :label="item.label"
      :sortable="item.sortable"
      :width="item.width"
      :fixed="item.fixed"
    >
      <template v-if="item.columnType" #default="scope">
        <div v-if="item.columnType == 'operation'">
          <!-- <slot :data="scope.row" :index="index" :name="item.sortName" /> -->
          <slot :data="scope.row" :index="index" :name="item.sortName" />
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  tableConfig: {
    type: Array as () => ITableColumn[],
    default: () => [],
  },
});
</script>

<style lang="scss" scoped></style>
